\<template>
  <div>
    <template v-for="menu in menus">
      <template
        v-if="appService.hasRole(menu.meta.role) && appService.hasPermission(menu.meta.permission)"
      >
        <!-- 1如果有子菜单 -->
        <template v-if="menu.children && menu.children.length>0">
          <!-- 2如果展示 -->
          <template v-if="menu.meta.show">
            <!-- 3如果侧边栏是非收起的 -->
            <template v-if="!isCollapsed">
              <Submenu
                :name="menu.id"
                :key="menu.id"
                :class="hasParent? 'larry-sider-sub-menu' : ''"
              >
                <template slot="title">
                  <Icon :type="menu.meta.icon" />
                  <span>{{menu.meta.name}}</span>
                </template>
                <SiderMenuItem
                  :menus="menu.children"
                  :key="Uuid.v1()+menu.fullPath"
                  :isCollapsed="isCollapsed"
                  :hasParent="menu.meta.show ? true:false"
                />
              </Submenu>
            </template>
            <!-- 3如果侧边栏是收起的 -->
            <template v-else>
              <Poptip :key="menu.id" placement="right" trigger="hover">
                <Submenu
                  :name="menu.id"
                  :key="menu.id"
                  :class="hasParent? 'larry-sider-sub-menu' : ''"
                >
                  <template slot="title">
                    <Icon :type="menu.meta.icon" />
                  </template>
                </Submenu>
                <SiderDropdownMenu slot="content" :menu="menu" />
              </Poptip>
            </template>
          </template>
          <!-- 2如果不展示 -->
          <template v-else>
            <SiderMenuItem
              :menus="menu.children"
              :key="Uuid.v1()+menu.fullPath"
              :isCollapsed="isCollapsed"
              :hasParent="menu.meta.show ? true:false"
            />
          </template>
        </template>
        <!-- 1如果没有子菜单, 并且展示 -->
        <template v-else-if="menu.meta.show">
          <!-- 2如果侧边栏是非收起的 -->
          <template v-if="!isCollapsed">
            <MenuItem
              :name="menu.id"
              :to="menu.fullPath"
              :key="menu.id"
              :class="hasParent ? 'larry-sider-menu-item': ''"
            >
              <Icon :type="menu.meta.icon" class="larry-sider-menu-item-icon" />
              <span>{{menu.meta.name}}</span>
            </MenuItem>
          </template>
          <!-- 2如果侧边栏是收起的 -->
          <template v-else>
            <Poptip :key="menu.id" placement="right" trigger="hover">
              <MenuItem
                :name="menu.id"
                :to="menu.fullPath"
                :class="hasParent ? 'larry-sider-menu-item': ''"
              >
                <Icon :type="menu.meta.icon" class="larry-sider-menu-item-icon" />
              </MenuItem>
              <SiderDropdownMenu slot="content" :menu="menu" />
            </Poptip>
          </template>
        </template>
      </template>
    </template>
  </div>
</template>

<script>
import Uuid from "uuid";
import { Submenu, MenuItem, Icon, Poptip } from "view-design";
import SiderDropdownMenu from "./SiderDropdownMenu";
import appService from "@/utils/appService";
export default {
  name: "SiderMenuItem",
  components: { Submenu, MenuItem, Icon, SiderDropdownMenu, Poptip },
  props: {
    menus: {
      type: Array,
      default: []
    },
    isCollapsed: {
      type: Boolean,
      default: false
    },
    hasParent: {
      type: Boolean,
      default: false
    }
  },
  data: function() {
    return {
      appService: appService,
      Uuid: Uuid
    };
  },
  methods: {}
};
</script>

<style lang="less">
.layout-logo-left {
  width: 90%;
  height: 30px;
  background: #5b6270;
  border-radius: 3px;
  margin: 15px auto;
}
.menu-icon {
  transition: all 0.3s;
}
.rotate-icon {
  transform: rotate(-90deg);
}
.sider-menu span {
  display: inline-block;
  overflow: hidden;
  width: 100px;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
  transition: width 0.2s ease 0.2s;
}
.sider-menu i {
  transform: translateX(0px);
  transition: font-size 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
  font-size: 16px;
}
.ivu-menu-item {
  padding-left: 0px !important;
}
.ivu-menu-dark.ivu-menu-vertical .ivu-menu-submenu .ivu-menu-item-active {
  background: unset !important;
  color: #2d8cf0;
}
.ivu-menu-submenu-title {
  padding-left: 23px !important;
}
.larry-sider-sub-menu {
  margin-left: 30px;
}
.ivu-menu-submenu {
  .larry-sider-menu-item-icon {
    margin-left: 40px;
  }
  .ivu-menu-submenu {
    margin-left: 17px !important;
  }
}
.larry-sider-menu-item-icon {
  margin-left: 23px;
}
.collapsed-menu {
  i {
    transform: translateX(5px);
    transition: font-size 0.2s ease 0.2s, transform 0.2s ease 0.2s;
    vertical-align: middle;
    font-size: 22px;
  }
  //收起侧边栏时, 隐藏最右侧的箭头图标
  .ivu-menu-submenu-title-icon {
    display: none;
  }
  .ivu-menu-submenu {
    padding-left: 2px !important;
    .larry-sider-menu-item-icon {
      margin-left: 22px !important;
    }
    //收起左侧菜单时,隐藏子菜单
    .ivu-menu {
      display: none;
    }
  }
  .larry-sider-sub-menu {
    margin-left: unset !important;
  }
  .larry-sider-menu-item-icon {
    padding-left: 1px !important;
  }
}
</style>
